<template>
  <div class="buy">
    <!-- 购买页面 -->
    <center>购买页面</center>
    <!-- 返回 -->
    <van-icon name="revoke" size="40" @click="$router.back()" />
    <!-- 收货地址 -->
    <main>
      <p class="address">北京市昌平区沙河镇沙阳路18号</p>
      <p class="name">美女小菊 120012001230</p>
      <!-- 选择地址电话图标 -->
      <van-icon name="arrow" @click='goAddress'/>
    </main>
    <!-- 商品 -->
    <main v-for="item in shopInfo" :key="item.id">
      <van-card
        :num="item.num"
        :price="item.retail_price"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
      />
    </main>
    <!-- 总价 -->
    <main>
      <p>优惠价格：无</p>
      <p>享受优惠：暂无</p>
      <p>使用红包：暂无</p>
    </main>
    <!-- 支付订单栏 -->
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script>
import { getAddressDate, getDetailDate } from "@/utils/http";
export default {
  data() {
    return {
      shopId: "", //传过来的商品id
      shopInfo: [], //商品信息
    };
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { getAddressDate, getDetailDate },
  created() {
    this.shopId = this.$route.query.id;
    // 发送商品详情请求
    getDetailDate({ id: this.shopId }).then((res) => {
      res.data.info.num = 1;
      this.shopInfo.push(res.data.info);
      console.log(res.data.info);
    });
  },
  computed: {
    totalPrice() {
      let sum = 0;
      this.shopInfo.forEach((item) => {
            sum += item.retail_price * item.num;
      });
      return sum*100;
    },
  },
  methods: {
    goAddress() {
      this.$toast('当前地址是默认地址')
      // this.$router.push('/address')
    },
    // 购买提交
    onSubmit() {
        this.$toast.success('购买成功')
    },
  },
};
</script>

<style lang="less" scoped>
body,
html {
  height: 100%;
}
.buy {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ccc;
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  padding-bottom:10px;
  center {
    background: red;
    color: white;
    padding: 10px 0;
  }
  main {
    margin: 20px 0;
    p {
      text-align: left;
      padding: 0 10px;
    }
    .van-icon {
      top: 80px;
      right: 20px;
      border-radius: 50%;
    }
    .address {
      font-size: 18px;
    }
    .name {
      font-size: 14px;
    }
    van-card {
      overflow: hidden;
    }
  }
  .van-icon {
    position: absolute;
    top: 0;
    z-index: 10;
    display: inline-block;
    font: normal normal normal 14px/1 vant-icon;
    font-size: inherit;
    border-radius: 50%;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
}
.buy > main {
  background: white;
  width: 96%;
  margin: 5px 0 0 1.5%;
  border-radius: 10px;
  border: 1px solid green;
}
</style>